<%--
  Created by IntelliJ IDEA.
  User: Shirly
  Date: 2016/11/30
  Time: 15:45
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
    <title>Title</title>
</head>
<body>

<a href="javascript:void(0)" id="mb" class="easyui-menubutton"
   data-options="menu:'#mm',iconCls:'icon-edit'">Edit</a>
<div id="mm" style="width:150px;">
    <div data-options="iconCls:'icon-undo'">Undo</div>
    <div data-options="iconCls:'icon-redo'">Redo</div>
    <div class="menu-sep"></div>
    <div>Cut</div>
    <div>Copy</div>
    <div>Paste</div>
    <div class="menu-sep"></div>
    <div data-options="iconCls:'icon-remove'">Delete</div>
    <div>Select All</div>
</div>

<a href="javascript:void(0)" id="sb" class="easyui-splitbutton"
   data-options="menu:'#mm2',iconCls:'icon-ok'" onclick="javascript:alert('ok')">Ok</a>
<div id="mm2" style="width:100px;">
    <div data-options="iconCls:'icon-ok'">Ok</div>
    <div data-options="iconCls:'icon-cancel'">Cancel</div>
</div>


<form id="ff" method="post">
    <div>
        <label for="name">Name:</label>
        <input class="easyui-validatebox" type="text" name="name" data-options="required:true" />
    </div>
    <div>
        <label for="email">Email:</label>
        <input class="easyui-validatebox" type="text" name="email" data-options="validType:'email'" />
    </div>
    <input class="easyui-textbox" data-options="iconCls:'icon-search'" style="width:300px">
    <input id ="text" type="text" style="width:300px">
</form>
<input type="text" class="easyui-numberbox" value="100" data-options="min:0,precision:2"></input>
<input id="cc" value="001">
<input class="easyui-datetimespinner" style="width:300px">
<div id="cc1" class="easyui-calendar" style="width:180px;height:180px;"></div>
<input class="easyui-slider" value="12"  style="width:300px"
       data-options="showTip:true,rule:[0,'|',25,'|',50,'|',75,'|',100]" />
<div class="easyui-slider" data-options="min:10,max:90,step:10" style="width:300px"></div>
<%--<div id="win" class="easyui-window" title="My Window" style="width:600px;height:400px"--%>
     <%--data-options="iconCls:'icon-save',modal:true">--%>
    <%--Window Content--%>
<%--</div>--%>
<table class="easyui-datagrid" style="width:400px;height:250px"
       data-options="fitColumns:true,singleSelect:true">
    <thead>
    <tr>
        <th data-options="field:'code'">编码</th>
        <th data-options="field:'name'">名称</th>
        <th data-options="field:'price'">价格</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>001</td><td>name1</td><td>2323</td>
    </tr>
    <tr>
        <td>002</td><td>name2</td><td>4612</td>
    </tr>
    </tbody>
</table>

<ul id="tt" class="easyui-tree">
    <li>
        <span>Folder</span>
        <ul>
            <li>
                <span>Sub Folder 1</span>
                <ul>
                    <li>
                        <span><a href="#">File 11</a></span>
                    </li>
                    <li>
                        <span>File 12</span>
                    </li>
                    <li>
                        <span>File 13</span>
                    </li>
                </ul>
            </li>
            <li>
                <span>File 2</span>
            </li>
            <li>
                <span>File 3</span>
            </li>
        </ul>
    </li>
    <li>
        <span>File21</span>
    </li>
</ul>

<div id="pp" style="width:800px;height:500px;">
    <div style="width:33%"></div>
    <div style="width:33%"></div>
    <div style="width:33%"></div>
</div>

<script>
    $('#text').textbox({
        buttonText:'Search',
        iconCls:'icon-man',
        iconAlign:'right'
    })
    $('#cc').combo({
        required:true,
        multiple:true,
        panelAlign:"left"
    });
  //  $.messager.alert('警告','警告消息');
   // $.messager.prompt('提示','提示消息');
    $.messager.progress('close');
//    $.messager.confirm('确认','您确认想要删除记录吗？',function(r){
    //        if (r){
    //            alert('确认删除');
    //        }
    //    });
    $('#pp').portal(options);
    var p = $('<div></div>').appendTo('body');
    p.panel({
        title: 'My Title',
        height:150,
        closable: true,
        collapsible: true
    });

    // add the panel to portal
    $('#pp').portal('add', {
        panel: p,
        columnIndex: 0
    });
</script>
<div id="mm3" class="easyui-menu" style="width:120px;">
    <div>New</div>
    <div>
        <span>Open</span>
        <div style="width:150px;">
            <div><b>Word</b></div>
            <div>Excel</div>
            <div>PowerPoint</div>
        </div>
    </div>
    <div data-options="iconCls:'icon-save'">Save</div>
    <div class="menu-sep"></div>
    <div>Exit</div>
</div>
</body>
</html>
